<template>
  <div>
    <van-form validate-first @failed="onFailed" @submit="onSubmit">
      <van-field
        v-model="coins"
        type="digit"
        name="coins"
        placeholder="0"
        label="售出FCB数量"
        :rules="[{ validator, message: '请输入正确内容' }]"
        class="text-base"
      />

      <van-field
        class="text-base"
        readonly
        clickable
        name="bank"
        :value="bank"
        label="银行卡"
        placeholder="点击选择"
        @click="showPicker = true"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="bankcards"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>

      <div
        class="bg-white px-4 py-2 flex justify-between items-center border-b"
      >
        <span class="text-base text-gray-500 mr-2"
          >可售出FCB数量 <span class="ml-2">{{ user.coins }}</span></span
        >
        <van-button
          type="primary"
          plain
          size="mini"
          @click="sellAll"
          native-type="button"
          >售出全部</van-button
        >
      </div>
      <div class="mx-4 mt-8 flex">
        <van-button
          block
          type="primary"
          plain
          native-type="button"
          @click="$router.push('/my/sells')"
          >查 看</van-button
        >
        <van-button block type="primary" native-type="submit">提 交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
// import XEUtils from 'xe-utils'
export default {
  components: {},
  data() {
    return {
      coins: '',
      bankcard_id: '',
      bank: '',
      showPicker: false,
    }
  },
  computed: {
    user() {
      return this.$store.state.user
    },
    bankcards() {
      return this.user.bankcards.map(item => {
        return {
          id: item.id,
          text: item.bank,
        }
      })
    },
    sys() {
      return this.$store.state.sys
    },
  },
  methods: {
    onConfirm(value) {
      this.bank = value.text
      this.bankcard_id = value.id
      this.showPicker = false
    },
    sellAll() {
      let num = Math.floor(this.user.coins)
      let ge = num % 10
      this.coins = num - ge
      // let all = Math.floor(this.user.coins)
    },
    validator(val) {
      // if (val % 10 !== 0) {
      //   this.$toast.fail('个位数必须是0')
      //   return false
      // }
      if (val  * 1000 < this.sys.sell_min_coins * 1000) {
          this.$toast.fail(`卖币需大于${this.sys.sell_min_coins}`)
        return false
      }
      if (this.user.coins * 1000 < val *1000) {
        this.$toast.fail('用户FCB不足')
        return false
      }
      if (val == '' || val <= 0) {
        return false
      }
      return true
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo)
    },
    onSubmit(values) {
      this.axios
        .post(`/m/member/sells`, {
          ...values,
          bankcard_id: this.bankcard_id,
        })
        .then(res => {
          this.$store.dispatch('pullUser')
          this.$toast.success('已提交申请')
          this.$router.push('/my/sells')
        })
    },
  },
}
</script>

<style>
</style>